<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="back"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />个人信息
    </view>
    <view class="top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
    <view class="content" :style="'height:calc( 100vh - ' + statusBarHeight1 + 'px - 88rpx)'">
      <view class="flex" @click="ChooseImage1">
        <view>头像</view>
        <view>
          <image class="userHeader" :src="userInfo.image" />
        </view>
        <image
          class="right"
          src="https://pic.bangbangtongcheng.com/static/you.png"
          mode="widthFix"
        />
      </view>
      <view class="flex" @click="modify(1)">
        <view>昵称</view>
        <view>{{ userInfo.nikeName }}</view>
        <image
          class="right"
          src="https://pic.bangbangtongcheng.com/static/you.png"
          mode="widthFix"
        />
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <cropper ref="croop" v-show="showCroop" :quality="1" resize: false :canScale="true"
    selWidth="660rpx" selHeight="660rpx" @upload="myUpload" class="userHeader" />
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN-->
    <gmy-img-cropper
      ref="gmyImgCropper"
      quality="1"
      cropperType="fixed"
      fileType="jpg"
      imgSrc=""
      @getImg="myUpload"
    >
    </gmy-img-cropper>
    <!-- #endif -->
    <uniBall></uniBall>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  //#ifdef MP-WEIXIN
  import cropper from '../components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue'
  //#endif

  // #ifndef MP-WEIXIN
  import gmyImgCropper from '../components/gmy-img-cropper/gmy-img-cropper.vue'
  //#endif
  export default {
    components: {
      // #ifndef MP-WEIXIN
      gmyImgCropper,
      //#endif
      //#ifdef MP-WEIXIN
      cropper,
      //#endif
    },
    data() {
      return {
        imgUrl: this.$imgSrc,
        confirm: false,
        userInfo: uni.getStorageSync('Pduser'),
        phone: '',
        merchantMessage: {},
        modal_qr: false,
        urls: '',
        // 小程序裁剪是否展示
        showCroop: false,
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onShow() {
      this.phone = this.userInfo.phone
      if (this.phone) {
        this.getUserPhone()
      }
      if (this.userInfo.isShop == 1) {
        this.getShopInfo()
      }
      this.urls = `https://www.bangbangtongcheng.com/conven_web/#/pages_my/setInfo?userId=${this.userInfo.id}`
    },

    onLoad(options) {
      if (getApp().globalData.confirm) {
        this.confirm = getApp().globalData.confirm
      }
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
      if (this.userInfo == '') {
        clearTimeout(time)
        uni.showToast({
          title: '未登录',
          icon: 'none',
          duration: 1000,
        })
        var time = setTimeout(() => {
          uni.reLaunch({
            url: 'index',
          })
          clearTimeout(time)
        }, 1000)
      }
    },
    methods: {
      getShopInfo() {
        this.$myRequest
          .get('/mob/user/getShopInfoDetailByCopy', {
            id: this.userInfo.shopId,
          })
          .then((res) => {
            this.merchantMessage = res.shopInfo
          })
      },
      amend() {
        uni.navigateTo({
          url: '/pages_my/enter_merchant?amend=1',
        })
      },

      back() {
        uni.navigateBack({
          delta: 1,
        })
      },
      modify(type) {
        uni.navigateTo({
          url: '/pages_my/modify?type=' + type,
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      async ChooseImage1() {
        // #ifdef APP-PLUS
        this.$refs.gmyImgCropper.chooseImage()
        //  #endif
        // #ifdef MP-WEIXIN
        this.showCroop = true
        this.$refs.croop.fSelect()
        //  #endif
        // #ifdef H5
        this.$refs.gmyImgCropper.chooseImage()
        // #endif
      },
      myUpload(rsp) {
        console.log(rsp, 11111111111)
        let filePath = ''
        // #ifndef MP-WEIXIN
        this.userInfo.image = rsp
        filePath = rsp
        // #endif
        // #ifdef MP-WEIXIN
        this.userInfo.image = rsp.path
        filePath = rsp.path
        this.showCroop = false
        //  #endif

        uni.showToast({
          title: '正在上传请稍后',
          icon: 'none',
          duration: 2000,
        })
        var _this = this
        uni.uploadFile({
          // 需要上传的地址
          url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
          // filePath  需要上传的文件
          filePath: filePath,
          name: 'file',
          success(res1) {
            let url = JSON.parse(res1.data).data[0].url
            console.log(url)
            _this.$myRequest
              .post('/mob/user/updateUserInfo', {
                id: _this.userInfo.id,
                image: url,
              })
              .then((res) => {
                // const that = this;
                //       uni.navigateTo({
                //         events: {
                //           imgCropped(event) {
                //             // 监听裁剪完成
                //             // 返回的 event 中包含了已经裁剪好图片的base64编码字符串
                //             // 你可以使用 <image :src="imgDataUrl" mode="aspectFit"></image> 组件来展示裁剪后的图片
                //             // 或者你可以将该字符串通过接口上传给服务器用来保存
                //             console.log(event);
                //             that.userInfo.image = event.data;
                //             // do whatever you want
                //             // upload to server
                //           },
                //         },
                //       });
                uni.showToast({
                  title: res.msg,
                  icon: 'none',
                })
                setTimeout(() => {
                  _this.getUserPhone()
                }, 1000)
              })
          },
        })
      },
      ChooseImage() {
        let _this = this
        uni.chooseImage({
          count: 1,
          sizeType: ['copressed'],
          sourceType: ['camera', 'album'],
          crop: {
            width: 500,
            height: 500,
            // quality: 80
            // resize: false
          },
          success(res) {
            //因为有一张图片， 输出下标[0]， 直接输出地址
            const tempFiles = res.tempFiles
            let length = ''
            // #ifdef H5
            length = tempFiles[0].name.length
            let resType = tempFiles[0].name.substring(length - 1, length)
            // #endif
            // #ifndef H5
            length = tempFiles[0].path.length
            let resType = tempFiles[0].path.substring(length - 1, length)
            // #endif
            if (resType != 'g' && resType != 'G') {
              uni.showToast({
                title: '不支持当前文件格式',
                icon: 'none',
              })
              return
            }
            var imgFiles = res.tempFilePaths
            var uper
            imgFiles.forEach((el) => {
              uni.showToast({
                title: '正在上传请稍后',
                icon: 'none',
                duration: 2000,
              })
              uper = uni.uploadFile({
                // 需要上传的地址
                url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                // filePath  需要上传的文件
                filePath: el,
                name: 'file',
                success(res1) {
                  // console.log(res1.data);
                  let url = JSON.parse(res1.data).data[0].url
                  _this.$myRequest
                    .post('/mob/user/updateUserInfo', {
                      id: _this.userInfo.id,
                      image: _this.imgUrl + url,
                    })
                    .then((res) => {
                      // const that = this;
                      //       uni.navigateTo({
                      //         url: "../../uni_modules/buuug7-img-cropper/pages/cropper",
                      //         events: {
                      //           imgCropped(event) {
                      //             // 监听裁剪完成
                      //             // 返回的 event 中包含了已经裁剪好图片的base64编码字符串
                      //             // 你可以使用 <image :src="imgDataUrl" mode="aspectFit"></image> 组件来展示裁剪后的图片
                      //             // 或者你可以将该字符串通过接口上传给服务器用来保存
                      //             console.log(event);
                      //             that.userInfo.image = event.data;
                      //             // do whatever you want
                      //             // upload to server
                      //           },
                      //         },
                      //       });
                      uni.showToast({
                        title: res.msg,
                        icon: 'none',
                      })
                      setTimeout(() => {
                        _this.getUserPhone()
                      }, 1000)
                    })
                },
              })
            })

            // onProgressUpdate 上传对象更新的方法
            uper.onProgressUpdate(function (res) {})
          },
          fail: (fail) => {
            // uni.showModal({
            //   title: '提示',
            //   content: '操作权限已被拒绝，请手动前往设置',
            //   confirmText: '立即设置',
            //   success: (res) => {
            //     if (res.confirm) {
            //       if (plus.os.name === 'iOS') {
            //         plus.runtime.openURL('app-settings://')
            //       } else {
            //         var Intent = plus.android.importClass('android.content.Intent')
            //         var Settings = plus.android.importClass('android.provider.Settings')
            //         var Uri = plus.android.importClass('android.net.Uri')
            //         var mainActivity = plus.android.runtimeMainActivity()
            //         var intent = new Intent()
            //         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
            //         var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
            //         intent.setData(uri)
            //         mainActivity.startActivity(intent)
            //       }
            //     }
            //   },
            // })
          },
        })
      },
      getUserPhone() {
        let that = this
        this.$myRequest
          .get('/mob/login/getUserInfoByPhone', {
            phone: this.phone,
          })
          .then((res) => {
            this.userInfo = res.userInfo
            uni.setStorageSync('Pduser', res.userInfo)
            that.$store.dispatch('user/login', res.userInfo)
          })
      },
    },
  }
</script>

<style scoped lang="less">
  page {
    background-color: #fff;
  }
  .box {
    background: #fff;
  }

  .content {
    /* #ifdef MP */
    /* height: calc(100vh - 192rpx); */
    /* #endif */
    /* #ifdef APP-PLUS || H5 */
    /* height: calc(100vh - statusBarHeight1 - 88rpx); */
    /* var(--status-bar-height1) */
    /* #endif */
    .title {
      margin-top: 34rpx;
      font-size: 34rpx;
      color: #64b6a8;
      margin-bottom: 34rpx;
    }

    .merchanTxt {
      font-size: 30rpx;
      margin-bottom: 12rpx;

      .merchan {
        color: #64b6a8;
      }
    }

    .merchanImg {
      margin-bottom: 40rpx;

      .merchanImgTxt {
        font-size: 34rpx;
        margin-bottom: 22rpx;
      }

      .imgs {
        width: 690rpx;
        height: 228rpx;
      }
    }
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 106rpx 30rpx 30rpx;
    border-bottom: 2rpx solid #e0e0e0;
    font-size: 34rpx;
    position: relative;

    .right {
      position: absolute;
      top: 50%;
      right: 49rpx;
      transform: translateY(-50%);
      width: 19rpx;
    }
  }

  .userHeader {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }

  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;

    left: 30rpx;
  }

  .tou {
    position: fixed;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
    z-index: 10;
  }

  .certifi-data {
    padding: 34rpx 30rpx;

    .certifi-top {
      display: flex;
      align-items: center;

      text {
        margin-right: 48rpx;
        font-size: 34rpx;
        font-weight: 600;
        color: #333333;
      }

      view {
        display: flex;
        align-items: center;
        font-size: 34rpx;
        color: #64b6a8;
      }
    }

    .certifi-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      view {
        font-size: 28rpx;
        font-weight: 600;
        color: #64b6a8;
        margin: 60rpx 0 25rpx;
      }

      image {
        width: 270rpx;
        height: 270rpx;
      }
    }
  }
</style>
